import React from 'react';
import { WeaDialog, WeaFormItem, WeaSearchGroup, WeaLocaleProvider, WeaTools } from 'ecCom';
import { WeaTableNew, WeaSwitch, WeaLogView,  } from 'comsMobx';
import { toJS } from 'mobx';

import { Button, Modal } from 'antd';
import { inject, observer } from 'mobx-react';
import PrintPreview from './printPreview';
const getKey = WeaTools.getKey;
const getLabel = WeaLocaleProvider.getLabel;

const seatCardStore = ['seatCardStore', 'meetingDialog'];
@inject(...seatCardStore)
@observer
export default class SeatCard extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      printPreviewVisible: false,
    }
  }

  componentDidMount() {
    const { getPrintCardSet } = this.props.seatCardStore;
    const { dialogStatus: {meetingId} } = this.props.meetingDialog;
    getPrintCardSet({ meetingid: meetingId });
  }

  componentWillUnmount() {
    const { setState, form } = this.props.seatCardStore;
    setState({ seatCardVisible: false });
    form.reset();
  }

  getSearchs = (form, conditions) => {
    if (!form) return;
    const { isFormInit } = form;
    let group = [];
    let col = 1;
    const formParams = form.getFormParams();
    isFormInit && conditions && conditions.map((c, index) => {
      let items = [];
      c.items.map(fields => {
        // if (getKey(fields) === 'selectType' || getKey(fields) === 'chooseMembers') { 
        //   col = 2;
        //   if (formParams.selectType == '0') {
        //     form.updateFields({ chooseMembers: '' })
        //   }
        // } else {
        //   col = 1;
        // }
        items.push({
          com: (<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@hmcwq2@${fields.domkey[0]}`}
            className={fields.domkey}
            label={`${fields.label}` }
            labelCol={{ span: `${fields.labelcol}` }}
            wrapperCol={{ span: `${fields.fieldcol}` }}
            error={form.getError(fields)}
          >
            <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@yf750j@${fields.domkey[0]}`} fieldConfig={fields} form={form}  />
          </WeaFormItem>),
          col: col,
          hide: form.isHide(fields, (keys, allParams) => {
            let bool = false;
            // getKey(fields) === 'chooseMembers'&& allParams.selectType === '0' && (bool = true)
            return bool;
          })
        })
      });
      group.push(<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@j3bypc@${index}`} className='print-set-templet-form' needTigger={true} showGroup={true} items={items} />);
    });
    return group;
  }

  printPage = () => {
    let { setState, getCardMouldSet, form, getBeforePrintInfo } = this.props.seatCardStore;
    const { dialogStatus: {meetingId} } = this.props.meetingDialog;
    let { selectType, mouldsIds, chooseMembers  } = form.getFormParams();

    let params = {
      meetingid: meetingId,
      selectType: selectType,
      chooseMembers: chooseMembers,
    };
    form.validateForm().then(f => {
      if (selectType == '1' && (!chooseMembers)) {
        Modal.warning({
          title: getLabel(127354, '警告'),
          content: getLabel(384010, '存在必填项未填写'),
        });
      } else {
        if (f.isValid) {
          getCardMouldSet({ id: mouldsIds },() => { 
            getBeforePrintInfo( params, () =>  setState({ printPreviewVisible: true }) );
          });
        } else {
          f.showErrors();
        }
      }
    })
  }

  render() {
    let { seatCardVisible, setState, printPreviewVisible, form, conditions, shareFields } = this.props.seatCardStore;
    const { isFormInit } = form;
    shareFields = toJS(shareFields)
    let btns = [
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@x33s6v@print`} type="primary" onClick={() => {this.printPage()}}>{getLabel('257','打印')}</Button>,
    ];
    return(
      <div >
        <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@qj0s57`} 
          title={getLabel('512438','打印席卡') }
          icon='icon-coms-meeting'
          iconBgcolor='#F14A2D'
          visible={seatCardVisible}
          style={{ width: 715, height: 220 }}
          onCancel={() => setState({ seatCardVisible: false })}
          buttons={btns}
          hasScroll={true}
        >
          { this.getSearchs(form, conditions) }
        </WeaDialog>
         
        <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@72up7d`}
          visible={printPreviewVisible}
          style={{ width: 0, height: 0}}
        >
          <div className="templet-print">
            <PrintPreview ecId={`${this && this.props && this.props.ecId || ''}_PrintPreview@0nsxi3`} />
          </div>
        </WeaDialog>
      </div>
    )
  }

}